<template>
  <yd-layout>
    <!-- 顶部导航 -->
    <div slot="navbar" class="m-headline-hd">
      <yd-navbar-back-icon slot="left" color="#fff" @click.native="$router.replace('/')"></yd-navbar-back-icon>
      <div class="time-box">
        <div class="bd left"></div>
        <div class="bd right"></div>
        <p class="text hd">今日头条</p>
        <p class="time">{{headLineDate}}</p>
        <p class="text week">{{headLineWeek}}</p>
      </div>
    </div>

    <div class="m-headline-ct">
      <w-empty v-if="!headLineList.length"></w-empty>
      <ListItem v-for="(headline, index) in headLineList" :key="index" :headline="headline" :isdate="headline.title != headLineList[0].title" />
    </div>
  </yd-layout>
</template>

<script>
  import ListItem from './listItem.vue'
  import { apiHeadLine } from 'js/api'
  import { mapGetters, mapMutations } from 'vuex'

  export default {
    data() {
      return {
        headLineList: []
      }
    },
    created() {
      if (this.headLineAllList.length) {
        this.headLineList = this.headLineAllList
      } else {
        apiHeadLine(this.token).then(data => {
          this.headLineList = data.topInfoList
          this.setHeadLineList(this.headLineList)
        })
      }
    },
    methods: {
      ...mapMutations(['setHeadLineList'])
    },
    computed: {
      ...mapGetters(['token', 'headLineAllList']),
      headLineDate() {
        return this.headLineList[0] && this.headLineList[0].date
      },
      headLineWeek() {
        let week = ''
        if (this.headLineDate) {
          const arrWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
          const oDate = new Date(`20${this.headLineDate}`) || new Date()
          const iWeek = oDate.getDay()
          week = arrWeek[iWeek]
        }
        return week
      }
    },
    components: {
      ListItem
    }
  }
</script>

<style lang="scss">
  .m-headline-hd {
    position: relative;
    height: 3.7rem;
    background: url(./img/pg.jpg) no-repeat center center;
    background-size: cover;
    .yd-back-icon {
      position: absolute;
      padding: .3rem;
    }
    .time-box {
      position: relative;
      margin: 1rem auto;
      width: 4rem;
      height: 2.2rem;
      padding: .2rem;
      color: #000;
      background: rgba(255, 255, 255, .5);
      .bd {
        position: absolute;
        width: 1.1rem;
        height: 1.8rem;
        border: 1px solid #000;
      }
      .left {
        left: .2rem;
        border-right: none;
      }
      .right {
        right: .2rem;
        border-left: none;
      }
      .text {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        line-height: .44rem;
        text-align: center;
      }
      .hd {
        top: 0;
        width: 1.3rem;
      }
      .week {
        bottom: 0;
        width: 1rem;
      }
      .time {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: .6rem;
        letter-spacing: .06rem;
      }
    }
  }
</style>